<template>
  <div class="timely-rate">
    <div class="search-header">
      <el-date-picker
        v-model="queryParams.beginDate"
        size="mini"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="开始日期"
        style="width: 180px;margin-right: 20px;"
      />
      <el-date-picker
        v-model="queryParams.endDate"
        size="mini"
        value-format="yyyy-MM-dd"
        type="date"
        style="width: 180px;"
        placeholder="结束日期"
        :picker-options="pickerOptionsEnd"
      />
      <el-checkbox v-model="queryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
      <div class="oprate-btn">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="dataChange">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="table"
      :span-method="objectSpanMethod"
      border
      size="mini"
      style="width: 100%;"
      height="calc(100vh - 150px)"
    >
      <el-table-column
        label="事业部："
        align="center"
      >
        <el-table-column
          label="楼栋"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.bdname.value }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        :label="gongsi"
        min-width="160"
        align="center"
      >
        <el-table-column label="工序" align="center" min-width="120">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="click"
            >
              <div class="ellipsis-all-content">{{ scope.row.checkname }}</div>
              <span slot="reference" class="ellipsis">{{ scope.row.checkname }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="cfcheckbatch" label="批次" align="center" min-width="60" />
        <el-table-column label="批次说明" align="center" min-width="160">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="click"
            >
              <div class="ellipsis-all-content">{{ scope.row.fdescription }}</div>
              <span slot="reference" class="ellipsis">{{ scope.row.fdescription }}</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="工程项目："
        align="center"
      >
        <el-table-column
          label="报验时间"
          min-width="140"
          align="center"
        >
          <template slot-scope="scope">
            <span slot="reference" class="ellipsis">{{ scope.row.inspectiontime }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        :label="xiangmu"
        align="center"
      >
        <el-table-column label="验收率" align="center" min-width="82">
          <template slot-scope="scope">
            <span>{{ scope.row.finishedrate | rate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tjfinished" label="及时验收率" align="center" min-width="82">
          <template slot-scope="scope">
            <span>{{ scope.row.timelyfinishedrate | rate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应验收比率" align="center" min-width="82">
          <template slot-scope="scope">
            <span>{{ scope.row.cfcheckpercent | rate }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNoTimelyFinishedBatch, downloadKeyTimelyRate } from '@/api/statement/keyProcessCheck'
export default {
  name: 'NoTimely',
  filters: {
    rate(val) {
      let rval = ''
      rval = (val * 100).toFixed(2)
      return rval + '%'
    }
  },
  data() {
    return {
      dateRangeValue: [],
      table: [],
      loading: false,
      fileLoading: false,
      queryParams: {
        beginDate: '',
        endDate: '',
        projectId: '',
        type: '',
        reportType: 2,
        haveOld: 0
      },
      gongsi: '',
      xiangmu: '',
      dataSourceKey: '',
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.queryParams.beginDate).getTime()
        }
      }
    }
  },
  watch: {
    '$route.query'(val) {
      if (val.projectId !== undefined && val.projectId !== this.queryParams.projectId ||
        val.type !== undefined && val.type !== this.queryParams.type ||
        val.beginDate !== undefined && val.beginDate !== this.queryParams.beginDate ||
        val.endDate !== undefined && val.endDate !== this.queryParams.endDate ||
        val.haveOld !== undefined && val.haveOld !== this.queryParams.haveOld
      ) {
        this.queryParams.beginDate = this.$route.query.beginDate
        this.queryParams.endDate = this.$route.query.endDate
        this.queryParams.projectId = val.projectId
        this.queryParams.type = val.type
        this.queryParams.haveOld = val.haveOld
        this.init()
      }
    }
  },
  created() {
    this.queryParams.beginDate = this.$route.query.beginDate
    this.queryParams.endDate = this.$route.query.endDate
    this.queryParams.projectId = this.$route.query.projectId
    this.queryParams.type = this.$route.query.type
    this.queryParams.haveOld = this.$route.query.haveOld
    this.init()
  },
  methods: {
    init() {
      if (!this.queryParams.beginDate || !this.queryParams.endDate) {
        this.$message.warning('开始时间和结束时间不能为空.')
        return
      }
      this.loading = true
      this.getNoTimelyFinishedBatch()
    },
    // 未及时
    getNoTimelyFinishedBatch() {
      getNoTimelyFinishedBatch(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data
            this.dataSourceKey = response.msg
            this.xiangmu = response.data[0].cflastname
            this.gongsi = response.data[0].cuname
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      downloadKeyTimelyRate({ ...this.queryParams, dataSourceKey: this.dataSourceKey }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同关键工序未及时验收统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange(val) {
      this.dataSourceKey = ''
      this.init()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.bdname.rowspan,
          colspan: 1
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    padding: 0 20px;
    .search-header{
      margin: 10px 0;
      display: flex;
      .oprate-btn {
        display: inline-block;
        margin-left: 50px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
